<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/iview.css">
<style type="text/css">
html,body{
	margin: 3px;
	padding: 3px;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/iview.min.js"></script>

</head>
<body>
<div id="myDiv">
	<i-row>
        <i-col span="20">
        	<i-table :columns="myColumn" :data="userList"></i-table>
		</i-col>
        <i-col span="4">
			<i-button type="ghost" icon="ios-search" @click="nextPage">下一页</i-button>
		</i-col>
    </i-row>

    
    
</div>
   
</body>
<script type="text/javascript">
var pageIndex = 1;
var myModel = {'myColumn':[{'title': '编号','key': 'id'},{'title': '姓名','key': 'userName'},{'title': '性别','key': 'sex'}],'userList':  []  };
var myViewModel = new Vue({
	el:'#myDiv',
	data:myModel,
	methods:{
		nextPage:function(){
			pageIndex ++;
			getData(pageIndex);
		}
	}
});

function getData(){
	$.ajax({
		url:'IndexAction',
		type:'POST',//GET,POST
		data:{currentPage:pageIndex},//提交给服务器
		dataType:'json',//服务器返回的类型（text,json）
		success:function(result){
			//绝对不能手动操作dom
			myModel.userList = result;
		},
		error:function(){
			alert('恭喜你，访问失败！');
		},
		timeout:3000
	});
}
getData(1);
</script>
</html>